<template>
  <div>子组件-zi</div>
  <p>结构使用：{{ name }}</p>
  <p>结构使用：{{ sex }}</p>
  <p>结构使用：{{ age }}</p>

  <el-button @click="qwe">子组件结构方法</el-button>

  <div>
    <!-- <el-transfer v-model="value" :data="data" /> -->
  </div>
</template>

<script>
  import { useUsersStroe } from '@/store/user.js'
  import { storeToRefs } from 'pinia'
  export default {
    setup() {
      const store = useUsersStroe()
      /* 
      当修改了父组件中的 子组件中使用store的值没有响应式改变时 使用 pinia库中提供的 storeToRefs 对 store 进行一个包裹 计算属性也可以进行一个解构
    */
      const { name, sex, age, saveSage } = storeToRefs(store)

      const qwe = () => {
        saveSage()
      }
      return {
        name,
        sex,
        age,
        saveSage,
        qwe
      }
    }
  }
</script>

<style></style>
